<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三国杀面杀实用小标记</title>
    <link rel="stylesheet" href="head.css">
    <style>
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }

        .button-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin: 20px 0;
            transition: all 0.3s ease;
            overflow: hidden;
            max-height: 0;
            opacity: 0;
        }

        .button-grid.visible {
            max-height: 1000px;
            opacity: 1;
        }

        .grid-button {
            height: 70px;
            min-width: 120px;
            padding: 10px 20px;
            background: linear-gradient(to bottom, #ffffff, #f5f5f5);
            border: 2px solid #ddd;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
            font-weight: bold;
            border-radius: 10px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }

        .grid-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
            border-color: #bbb;
        }

        .grid-button.active {
            background: linear-gradient(to bottom, #ff4444, #cc0000);
            color: white;
            border-color: #ff0000;
            box-shadow: 0 4px 8px rgba(255, 0, 0, 0.3);
            transform: scale(1.05);
        }

        .control-panel {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            justify-content: center;
        }

        .control-button {
            padding: 12px 24px;
            cursor: pointer;
            background: linear-gradient(to right, #4CAF50, #2E7D32);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            min-width: 120px;
        }

        .control-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }

        .control-button:active {
            transform: translateY(1px);
        }
        
        /* 优化区域标题 */
        .container h2 {
            font-size: 2rem;
            color: #b71c1c;
            text-align: center;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

        .container h2::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(to right, #d32f2f, #b71c1c);
        }
        
        /* 全局重置按钮样式 */
        .global-controls {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        
        .global-reset-btn {
            padding: 14px 30px;
            background: linear-gradient(to right, #d32f2f, #b71c1c);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(183, 28, 28, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .global-reset-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 20px rgba(183, 28, 28, 0.4);
        }
        
        .global-reset-btn:active {
            transform: translateY(1px);
        }
        
        .global-reset-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: all 0.6s;
        }
        
        .global-reset-btn:hover::before {
            left: 100%;
        }
        
        /* 移动端优化样式 */
        @media (max-width: 768px) {
            /* 调整容器内边距 */
            .container {
                padding: 15px;
                margin: 15px auto;
            }
            
            /* 调整按钮网格为2列 */
            .button-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            /* 增大按钮尺寸便于触摸 */
            .grid-button {
                height: 80px;
                min-width: 0;
                padding: 10px 5px;
                font-size: 14px;
            }
            
            /* 调整控制面板布局 */
            .control-panel {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            
            .control-button {
                width: 100%;
                max-width: 300px;
                padding: 14px;
                font-size: 16px;
            }
            
            /* 调整标题大小 */
            .container h2 {
                font-size: 1.6rem;
            }
            
            /* 调整全局按钮 */
            .global-reset-btn {
                width: 90%;
                max-width: 350px;
                padding: 16px;
                font-size: 16px;
            }
            
            /* 调整英雄区域 */
            .hero-section {
                padding: 15px;
            }
            
            .hero-title {
                font-size: 1.2rem;
                padding: 0 10px;
            }
            
            /* 调整页脚 */
            .site-footer {
                padding: 15px;
            }
            
            .author-info, .code-update, .license-notice {
                text-align: center;
                margin-bottom: 15px;
            }
            
            .bili-btn, .github-btn, .gitcode-btn {
                display: block;
                width: 100%;
                margin: 10px 0;
                padding: 12px;
            }
        }
        
        @media (max-width: 480px) {
            /* 在超小屏幕上使用单列布局 */
            .button-grid {
                grid-template-columns: 1fr;
            }
            
            .grid-button {
                height: 70px;
                font-size: 15px;
            }
            
            /* 调整导航按钮 */
            .nav-button {
                width: 100%;
                margin-bottom: 10px;
            }
        }
        
        /* 移动导航菜单 */
        .mobile-nav-toggle {
            display: none;
            position: fixed;
            top: 15px;
            right: 15px;
            background: #d32f2f;
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 24px;
            z-index: 1000;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }
        
        .mobile-nav {
            display: none;
            position: fixed;
            top: 80px;
            right: 15px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 999;
            width: 200px;
            padding: 10px 0;
        }
        
        .mobile-nav a {
            display: block;
            padding: 12px 20px;
            color: #333;
            text-decoration: none;
            font-weight: bold;
            border-bottom: 1px solid #eee;
        }
        
        .mobile-nav a:last-child {
            border-bottom: none;
        }
        
        .mobile-nav a:hover {
            background: #f5f5f5;
        }
        
        @media (max-width: 768px) {
            .mobile-nav-toggle {
                display: block;
            }
            
            .tooltip-container .nav-buttons {
                display: none;
            }
        }
        
        /* 按钮触摸反馈 */
        .grid-button:active {
            transform: scale(0.98);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        /* 区域滚动定位 */
        .zone-nav {
			position: sticky;
            display: flex;
            justify-content: center;
            margin: 15px 0;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .zone-nav-btn {
            padding: 8px 15px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
        }
        
		.zone-nav {
		    display: flex;
		    justify-content: center;
		    margin: 15px 0;
		    flex-wrap: wrap;
		    gap: 10px;
		    position: sticky;
		    top: 0;
		    z-index: 100;
		    background: white;
		    padding: 10px;
		    box-shadow: 0 2px 10px rgba(0,0,0,.1);
		}
		
		@media (max-width: 768px) {
		    .zone-nav {
		        position: static; 
		        top: auto;
		        background: transparent;
		        z-index: auto;
		        padding: 15px 0 0;
		        box-shadow: none;
		    }
		}

    </style>
</head>
<body>
    <!-- 移动端导航按钮 -->
    <button class="mobile-nav-toggle">☰</button>
    <div class="mobile-nav">
        <a href="index.html">返回新版主页</a>
		<a href="indexjd.html">返回经典版主页</a>
        <a href="#zone-0">生熏鱼定汉</a>
        <a href="#zone-1">公公滔乱</a>
        <a href="#zone-2">测试区域</a>
    </div>

    <section class="hero-section">
        <h1 class="hero-title">三国杀面杀小标记</h1>
        <div class="tooltip-container">
            <div class="nav-buttons">
                <button class="nav-button"><a href="index.html">返回新版主页</a></button>
                <button class="nav-button"><a href="indexjd.html">返回经典版主页</a></button>
            </div>
        </div>
        <h3 class="hero-title">
            说明：<br />
            本标记网页可脱离联机版单独运行，脱离联机版运行时只会令页顶和页尾的css失效，不影响使用。
        </h3>
    </section>
    
    <!-- 区域导航 -->
    <div class="zone-nav">
        <button class="zone-nav-btn" data-target="zone-0">生熏鱼定汉</button>
        <button class="zone-nav-btn" data-target="zone-1">公公滔乱</button>
        <button class="zone-nav-btn" data-target="zone-2">测试区域</button>
    </div>
    
    <!-- 全局重置按钮 -->
    <div class="global-controls">
        <button class="global-reset-btn">一键重置所有区域</button>
    </div>
    
    <!-- 区域1 -->
    <div class="container" id="zone-0">
        <h2>生熏鱼定汉</h2>
        <div class="control-panel">
            <button class="control-button toggle-btn">展开</button>
            <button class="control-button reset-btn">一键重置</button>
        </div>
        <div class="button-grid">
            <button class="grid-button">顺手牵羊</button>
            <button class="grid-button">过河拆桥</button>
            <button class="grid-button">南蛮入侵</button>
            <button class="grid-button">借刀杀人</button>
            <button class="grid-button">万箭齐发</button>
            <button class="grid-button">乐不思蜀</button>
            <button class="grid-button">闪电</button>
            <button class="grid-button">兵粮寸断</button>
            <button class="grid-button">无中生有</button>
            <button class="grid-button">桃园结义</button>
            <button class="grid-button">铁索连环</button>
            <button class="grid-button">决斗</button>
            <button class="grid-button">无懈可击</button>
            <button class="grid-button">火攻</button>
            <button class="grid-button">五谷丰登</button>
        </div>
    </div>
    
    <!-- 区域2 -->
    <div class="container" id="zone-1">
        <h2>公公滔乱</h2>
        <div class="control-panel">
            <button class="control-button toggle-btn">展开</button>
            <button class="control-button reset-btn">一键重置</button>
        </div>
        <div class="button-grid">
            <button class="grid-button">杀</button>
            <button class="grid-button">雷杀</button>
            <button class="grid-button">火杀</button>
            <button class="grid-button">闪</button>
            <button class="grid-button">桃</button>
            <button class="grid-button">酒</button>
            <button class="grid-button">万箭齐发</button>
            <button class="grid-button">过河拆桥</button>
            <button class="grid-button">顺手牵羊</button>
            <button class="grid-button">南蛮入侵</button>
            <button class="grid-button">无中生有</button>
            <button class="grid-button">桃园结义</button>
            <button class="grid-button">铁索连环</button>
            <button class="grid-button">决斗</button>
            <button class="grid-button">无懈可击</button>
            <button class="grid-button">火攻</button>
            <button class="grid-button">五谷丰登</button>
        </div>
    </div>
    
    <!-- 区域3 -->
    <div class="container" id="zone-2">
        <h2>测试区域</h2>
        <div class="control-panel">
            <button class="control-button toggle-btn">展开</button>
            <button class="control-button reset-btn">一键重置</button>
        </div>
        <div class="button-grid">
            <button class="grid-button">1</button>
            <button class="grid-button">2</button>
            <button class="grid-button">3</button>
            <button class="grid-button">4</button>
            <button class="grid-button">5</button>
            <button class="grid-button">6</button>
            <button class="grid-button">7</button>
            <button class="grid-button">8</button>
            <button class="grid-button">9</button>
            <button class="grid-button">10</button>
        </div>
    </div>
    <button id="backToTopBtn">回到顶部</button>
    <footer class="site-footer">
        <div class="author-info">
            <p>
                作者： <a href="https://space.bilibili.com/87412647?spm_id_from=333.1007.0.0"
                    target="_blank">bilibili月が綺麗ですね_</a><br />
                联系方式：<a href="mailto:3099637681@qq.com" target="_blank">3099637681@qq.com（QQ同号）</a><br />
                有什么新功能或建议欢迎骚扰（著名来意）<br />
                <a href="https://1145141919810tonny.github.io/sgsmoniqi/" target="_blank">点击此处使用GitHub Pages在线服务</a>
            </p>
        </div>
        <div class="code-update">
            <a href="https://www.bilibili.com/read/readlist/rl929858?spm_id_from=333.1387.0.0" target="_blank"
                class="bili-btn" rel="noopener noreferrer">
                [bilibili]获取更新动态
            </a>
            <a href="https://github.com/1145141919810TONNY/sgsmoniqi/" target="_blank" class="github-btn"
                rel="noopener noreferrer">
                [GitHub]获取后续代码更新
            </a>
            <a href="https://gitcode.com/TONNY114514/sgsmnq?source_module=search_project" target="_blank"
                class="gitcode-btn" rel="noopener noreferrer">
                [GitCode]获取后续代码更新(国内git)
            </a>
        </div>
        <div class="license-notice">
            <p>
                Copyright &copy; <span id="copyright-year">2025</span> bilibili 月が綺麗ですね_<br />
                Released under the
                <a href="MIT LICENSE.html" title="查看MIT许可证" class="license-link" target="_blank">
                    MIT License
                </a>
            </p>
            <p class="i18n-annotation">
                (法律条款以英文版<a href="MIT LICENSE.html" target="_blank">LICENSE</a>文件为准)
            </p>
        </div>
    </footer>

    <script>
        // 封装区域控制功能
        function setupZoneControl(zoneId) {
            const zone = document.getElementById(zoneId);
            const toggleBtn = zone.querySelector('.toggle-btn');
            const resetBtn = zone.querySelector('.reset-btn');
            const buttonGrid = zone.querySelector('.button-grid');
            const gridButtons = buttonGrid.querySelectorAll('.grid-button');
            
            // 展开/收起功能
            toggleBtn.addEventListener('click', function() {
                buttonGrid.classList.toggle('visible');
                this.textContent = buttonGrid.classList.contains('visible') ? '收起' : '展开';
            });
            
            // 一键重置
            resetBtn.addEventListener('click', function() {
                gridButtons.forEach(btn => {
                    btn.classList.remove('active');
                });
            });
            
            // 按钮点击切换
            gridButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('active');
                });
            });
        }
        
        // 全局重置所有区域
        function resetAllZones() {
            // 获取所有区域容器
            const zones = document.querySelectorAll('.container');
            
            zones.forEach(zone => {
                // 重置按钮状态
                const gridButtons = zone.querySelectorAll('.grid-button');
                gridButtons.forEach(btn => {
                    btn.classList.remove('active');
                });
                
                // 重置展开/收起状态
                const buttonGrid = zone.querySelector('.button-grid');
                const toggleBtn = zone.querySelector('.toggle-btn');
                buttonGrid.classList.remove('visible');
                toggleBtn.textContent = '展开';
            });
            
            // 添加视觉反馈
            const resetBtn = document.querySelector('.global-reset-btn');
            resetBtn.textContent = '✓ 已重置';
            setTimeout(() => {
                resetBtn.textContent = '一键重置所有区域';
            }, 1500);
        }
        
        // 移动端导航功能
        function setupMobileNav() {
            const mobileToggle = document.querySelector('.mobile-nav-toggle');
            const mobileNav = document.querySelector('.mobile-nav');
            
            mobileToggle.addEventListener('click', function() {
                const isVisible = mobileNav.style.display === 'block';
                mobileNav.style.display = isVisible ? 'none' : 'block';
            });
            
            // 点击导航项后关闭菜单
            mobileNav.querySelectorAll('a').forEach(link => {
                link.addEventListener('click', () => {
                    mobileNav.style.display = 'none';
                });
            });
        }
        
        // 区域导航功能
        function setupZoneNavigation() {
            const zoneNavBtns = document.querySelectorAll('.zone-nav-btn');
            
            zoneNavBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');
                    const targetElement = document.getElementById(targetId);
                    
                    if (targetElement) {
                        // 滚动到目标区域
                        targetElement.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });
        }
		// 获取按钮
		const backToTopBtn = document.getElementById('backToTopBtn');
		
		// 滚动事件监听，控制按钮显示隐藏
		window.addEventListener('scroll', () => {
			if (window.scrollY > 200) { // 当滚动距离大于200时显示按钮
				backToTopBtn.style.display = 'block';
			} else {
				backToTopBtn.style.display = 'none';
			}
		});
		
		// 点击按钮回到顶部
		backToTopBtn.addEventListener('click', () => {
			window.scrollTo({
				top: 0,
				behavior: 'smooth' // 平滑滚动
			});
		});
        
        // 初始化所有区域
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化所有区域
            setupZoneControl('zone-0');
            setupZoneControl('zone-1');
            setupZoneControl('zone-2');
            
            // 设置版权年份
            document.getElementById('copyright-year').textContent = new Date().getFullYear();
            
            // 绑定全局重置按钮事件
            const globalResetBtn = document.querySelector('.global-reset-btn');
            globalResetBtn.addEventListener('click', resetAllZones);
            
            // 设置移动端导航
            setupMobileNav();
            
            // 设置区域导航
            setupZoneNavigation();
            
            // 添加触摸反馈
            document.querySelectorAll('.grid-button').forEach(button => {
                button.addEventListener('touchstart', function() {
                    this.classList.add('active');
                });
                
                button.addEventListener('touchend', function() {
                    this.classList.remove('active');
                });
            });
        });
    </script>
</body>
</html>